<template>
  <div class="content">
    <!-- addstatus -->
    <div class="prop">
      <div style="height:100px;width:100%"></div>
      <div class="warpprop" style="width:1000px;height:700px;">
        <div class="propheader">
          {{type==1?'新建代理':'编辑代理'}}
          <!-- <p class="close1" >关闭</p> -->
          <el-button class="close1" type="text" @click.native="setaddstatus">关闭</el-button>
        </div>
        <div class="seachlist">
          <div class="seachlistitem">
            <div class="nameone">代理名称</div>
            <el-input style="width:200px;" v-model="addparam.name"></el-input>
          </div>

          <div class="seachlistitem">
            <div class="nameone">资质资料</div>
            <el-upload
              :action="$src+'/api/upload'"
              name="file"
              class="upload-demo"
              :multiple="false"
              :limit="1"
              :file-list="file_list"
              :on-success="successfile"
            >
              <el-button size="small" type="primary" >点击上传</el-button>
            </el-upload>
          </div>
          <div class="seachlistitem">
            <div class="nameone">类型</div>
            <el-radio v-model="addparam.class_id" label="1">传统</el-radio>
            <el-radio v-model="addparam.class_id" label="2">新媒体</el-radio>
          </div>
          <div class="seachlistitem">
            <div class="nameone">联系人</div>
            <el-input style="width:200px;" v-model="addparam.contact"></el-input>
          </div>
          <div class="seachlistitem">
            <div class="nameone">联系电话</div>
            <el-input style="width:200px;" v-model="addparam.mobile"></el-input>
          </div>
          <div class="seachlistitem">
            <div class="nameone">税号</div>
            <el-input style="width:200px;" v-model="addparam.number"></el-input>
          </div>
          <div class="seachlistitem">
            <div class="nameone">开户银行</div>
            <el-input style="width:200px;" v-model="addparam.bank"></el-input>
          </div>

          <div class="seachlistitem">
            <div class="nameone">银行账号</div>
            <el-input style="width:200px;" v-model="addparam.bank_num"></el-input>
          </div>
          <div class="seachlistitem" style="width:50%;">
            <div class="nameone">省/市</div>
            <v-distpicker hide-area :city="addparam.city" :province="addparam.province" @selected="selectcity"></v-distpicker>
          </div>
        </div>
        <div class="sectggg">
          <div class="nameone">广告主</div>
          <el-button
            type="text"
            style="margin-left:20px;margin-right:20px;"
            @click.native="setchoicegg"
          >选择广告主</el-button>
          <!-- <el-button type="primary">新建广告主</el-button> -->
        </div>
        <div class="p-list" v-if="selectGGZ.length">
          <el-table
            :data="selectGGZ"
            border
            :row-style="{height:'0px'}"
            :cell-style="{padding:'0px 0'}"
            style="width: 100%"
          >
            <el-table-column prop="name" label="广告主" align="center"></el-table-column>
            <el-table-column  align="center" label="代理起始时间" >
              <template slot-scope="scope">
                     <el-date-picker
                     style="max-width:150px;"
                      v-model="selectGGZ[scope.$index].start_time"
                      type="date"
                      @input="change"
                      placeholder="选择日期">
                    </el-date-picker>
              </template>
            </el-table-column>
            <el-table-column align="center" label="代理结束时间">
               <template slot-scope="scope">
                     <el-date-picker
                     style="max-width:150px;"
                     @input="change"
                      v-model="selectGGZ[scope.$index].end_time"
                      type="date"
                      placeholder="选择日期">
                    </el-date-picker>
              </template>
            </el-table-column>
            <el-table-column prop="created_at" align="center" label="添加日期"></el-table-column>
            <el-table-column align="center" width="100" label="操作">
              <template slot-scope="scope">
                <!-- <el-button @click="del(scope.row)" type="text" size="small">修改</el-button> -->
                <el-button @click="delitem(scope)" type="text" size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="sectggg" style="margin-top:10px;">
          <div class="nameone">说明</div>
          <el-input type="textarea" v-model="addparam.remark" :rows="2" placeholder="请输入内容"></el-input>
        </div>
        <div class="sectggg" style="margin-top:10px;">
          <div class="nameone">状态</div>
          <el-radio v-model="addparam.status" label="1">草稿</el-radio>
          <el-radio v-model="addparam.status" label="2">提交审核</el-radio>
        </div>
        <div class="closesee">
          <el-button type="primary" @click.native="save">保存</el-button>
        </div>
      </div>
    </div>
    <!-- choice -->
    <div class="prop propp" v-if="choice"> 
      <div style="height:150px;width:100%"></div>
      <div class="warpprop" style="width:700px;height:500px;">
        <div class="propheader">
          选择广告主
          <!-- <p class="close1" >关闭</p> -->
          <el-button class="close1" type="text" @click.native="setchoicegg">关闭</el-button>
        </div>
        <div class="gg-seach">
          <div class="gg-name">检索关键字</div>
          <el-input style="width:200px;"></el-input>
          <el-button type="primary" style="margin:0 10px;" @click.native="GGZseach">检索</el-button>
          <!-- <el-button type="primary">新建</el-button> -->
        </div>
        <div class="gg-list">
          <el-table
            :data="GGZ_list"
            border
            :row-style="{height:'0px'}"
            :cell-style="{padding:'4px 0'}"
            style="width: 100%"
            :row-class-name="tableRowClassName"
          >
           <el-table-column
      type="index"
      label="序号"
      align="center"
      width="50">
    </el-table-column>
            <el-table-column prop="city" label="城市" align="center"></el-table-column>
            <el-table-column prop="name" label="广告主" align="center"></el-table-column>
            <el-table-column prop="" align="center" label="联系人"></el-table-column>
            <el-table-column prop="mobile" label="电话" align="center"></el-table-column>
            <el-table-column prop="created_at" align="center" label="创建日期"></el-table-column>

            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button @click="clickselect(scope.row)" type="text" size="small">{{scope.row.check?'取消选择':'选择'}}</el-button>
              </template>
            </el-table-column> 
          </el-table>
          <div class="block block1" style="justify-content: space-between;">
            
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="changGGZ"
              :current-page.sync="GGZ_page"
              :page-size="5"
              layout="prev, pager, next, jumper"
              :total="GGZ_alltotal"
            ></el-pagination>
          </div>
        </div>
        <div class="closesee" style="margin-top: 20px;">
          <el-button type="primary" @click.native="setchoicegg">关闭</el-button>
        </div>
      </div>
    </div>
    <div class="prop propp" v-if="record">
      <div style="height:150px;width:100%"></div>
      <div class="warpprop" style="width:800px;height:450px;">
        <div class="propheader">
          违规记录
          <!-- <p class="close1" >关闭</p> -->
          <el-button class="close1" type="text" @click.native="setrecord">关闭</el-button>
        </div>
        <div class="gg-seach">
          <div class="gg-name" style="width:auto;">代理商名称：</div>
          <div class="gg-name">代理商A</div>
          <div class="gg-name">违规日期：</div>
           <el-date-picker
      v-model="value1"
      style="width:200px;"
      type="daterange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期">
    </el-date-picker>
          <el-button type="primary" style="margin:0 10px;">检索</el-button>
        </div>
        <div class="gg-list">
          <div class="block"><el-button type="text">添加违规记录</el-button></div>
          <el-table
            :data="list"
            border
            :row-style="{height:'0px'}"
            :cell-style="{padding:'0px 0'}"
            style="width: 100%"
          >
            <el-table-column label="序号" align="center" width="50"></el-table-column>
            <el-table-column prop="date" label="违规性质" align="center"></el-table-column>
            <el-table-column prop="name" label="违规时间" align="center"></el-table-column>
            <el-table-column prop="province" align="center" label="违规类容"></el-table-column>

           
          </el-table>
          <div class="block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage3"
              :page-size="100"
              layout="prev, pager, next, jumper"
              :total="1000"
            ></el-pagination>
          </div>
        </div>
        <div class="closesee">
          <el-button type="primary">关闭</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import VDistpicker from "v-distpicker";
import {GetAgencyManagement,getAdvertising,editAgencyIfo,AddAgencyManagement,getAgencyIfo} from '@/api/Market.js'
import {SETDATE} from '../../../api/System.js'
export default {
  comments: {
    VDistpicker
  },
  props: ['sale_id'],
  data() {
    return {
      // type为1新建代理 2位编辑代理
      type:1,
      choice: false,
      currentPage3: 1,
      addstatus: false,
      record:false,
      value1:'',
      radio: "1",
      list: [{ name: "xxxx" }],
      //列表页数
      page:1,
      //总条数
      alltotal:0,
      alllist:[],
      name:'',
      //添加代理参数
      addparam:{
        name:'',
        province:'',
        city:'',
        file_path:'',
        class_id:'1',
        contact:'',
        mobile:'',
        number:'',
        bank:'',
        bank_num:'',
        remark:'',
        status:'1',
      },
      //广告主选择的参数
      GGZ_name:'',
      GGZ_page:1,
      GGZ_alltotal:0,
      GGZ_list:[],
      //选中广告主列表
      selectGGZ:[
      ],
      file_list:[]
    };
  },
  created() {
    
    // this.getlist()
    
  },
  methods: {
    //获取详情
    getiteminfo(id){

      getAgencyIfo({id:id}).then(res=>{
        console.log(res)
        if(res.code==200){
          this.addparam.name=res.data.name
          this.addparam.province=res.data.province
          this.addparam.city=res.data.city
          this.addparam.file_path=res.data.file_path
          this.file_list=[{name:'资质资料',url:res.data.file_path}]
          this.addparam.class_id=res.data.class_id+""
          this.addparam.contact=res.data.contact
          this.addparam.mobile=res.data.mobile
          this.addparam.number=res.data.number
          this.addparam.bank=res.data.bank
          this.addparam.bank_num=res.data.bank_num
          this.addparam.remark=res.data.remark
          this.addparam.status=res.data.status+''
           this.selectGGZ=res.data.get_media_up_agent
          this.selectGGZ.forEach(element => {
            element.id=element.media_up_id
            element.name=element.media_name
            element.created_at=SETDATE(element.created_at,true)
            console.log(new Date(element.end_time*1000))
            element.start_time=new Date(element.start_time*1000)
             element.end_time=new Date(element.end_time*1000)
          });
          //打开编辑
          this.setaddstatus()
        }
      })
    },
    //编辑代理
    editortetx(row){
     this.type=2
     this.ID=row.id
     this.getiteminfo(this.ID)
     
    },
    //广告主检索
    GGZseach(){
    this.GGZ_page=1
    this.GGZ_alltotal=0
    this.getGGZlist()
    },
    //广告主列表页数改变
    changGGZ(e){
    this.GGZ_page=e
    this.getGGZlist()
    },
    //选择广告主
    clickselect(row){
     console.log(row)
     var id=row.id
     if(row.check){
       var index=''
       for (let i = 0; i < this.selectGGZ.length; i++) {
         if(this.selectGGZ[i].id==id){
             index=i
             break
         }
         
       }
     this.selectGGZ.splice(index,1)
     row.check=false
     }else{
       row.start_time=''
       row.end_time=''
       this.selectGGZ.push(row)
       row.check=true
     }
    },
    //获取广告主列表
    getGGZlist(){
      let data={
        name:this.GGZ_name,
        per:5,
        page:this.GGZ_page
      }
    getAdvertising(data).then(res=>{
      if(res.code=200){
        this.GGZ_list = res.data.data;
           this.GGZ_list.forEach(element => {
            element.created_at=SETDATE(element.created_at,true)
            this.selectGGZ.forEach(item => {
            if(item.id==element.id){
              element.check=true
            }
       
          });
          });
           
          this.GGZ_alltotal = res.data.total;
          this.GGZ_page = res.data.current_page;
      }
    })
    },
    //点击新建代理
    
    change(e){
    // console.log(e)
    this.$forceUpdate()
    },
  //
    save(){
    // console.log(this.addparam)
    if(!this.addparam.name){
       this.$message({
          message: '代理名称不能为空',
          type: 'warning'
      })
      return
    }
    if(!this.addparam.file_path){
       this.$message({
          message: '请上传资质资料',
          type: 'warning'
      })
      return
    }
    if(!this.addparam.contact){
       this.$message({
          message: '联系人不能为空',
          type: 'warning'
      })
      return
    }
    if(!this.addparam.mobile){
       this.$message({
          message: '联系电话不能为空',
          type: 'warning'
      })
      return
    }
    if(!this.addparam.number){
       this.$message({
          message: '税号不能为空',
          type: 'warning'
      })
      return
    }
    if(!this.addparam.bank){
       this.$message({
          message: '开户银行不能为空',
          type: 'warning'
      })
      return
    }
    if(!this.addparam.bank_num){
       this.$message({
          message: '银行账号不能为空',
          type: 'warning'
      })
      return
    }
    if(!this.addparam.city){
       this.$message({
          message: '请选择省/市',
          type: 'warning'
      })
      return
    }
    // console.log(this.selectGGZ)
    // if(this.selectGGZ.length<1){
    //    this.$message({
    //       message: '请选择广告主',
    //       type: 'warning'
    //   })
    //   return
    // }
    var falg=true
    this.selectGGZ.forEach(element => {
      if(!element.start_time || !element.end_time){
        falg=false
       
      }
    });
    if(!falg){
      this.$message({
          message: '代理起始时间和结束时间不能为空',
          type: 'warning'
      })
      return
    }
    var arr=[]
    console.log(this.selectGGZ)
    let selectGGZ = this.selectGGZ
    selectGGZ.forEach(element => {
      arr.push({
        id:element.id,
        start_time:new Date(element.start_time).getTime()/1000,
        end_time: new Date(element.end_time).getTime()/1000
      })
    });
    this.addparam.media_up=arr
    this.addparam.sale_id=this.sale_id
    // console.log(this.addparam)
    if(this.type==1){
       AddAgencyManagement(this.addparam).then(res=>{
      // console.log(res)
      if(res.code==200){
        this.$message({
          message:'添加成功',
          type:'success'
        })
        this.name=''
        this.page=1
        this.alltotal=0
        this.setaddstatus()
        this.getlist()
        this.selectGGZ=[]
      }
    })
    }else{
      var param={...this.addparam}
      param.id=this.ID
      editAgencyIfo(param).then(res=>{
        console.log(res);
        if(res.code==200){
          this.$message({
          message:'编辑成功',
          type:'success'
        })
        this.name=''
        this.page=1
        this.alltotal=0
        this.setaddstatus()
        this.selectGGZ=[]
        this.getlist()
        }
      })
    }
   
    },
    successfile(e){
    // console.log(e)
    if(e.code==200){
      // this.file_list=[]
      console.log(e.data)
      this.addparam.file_path=e.data.path
    }
    },
    //删除广告主
    delitem(e){
    //  console.log(e)
     var index=e.$index
     this.selectGGZ.splice(index,1)
    },
    //设置页数
    setpage(e){
    //  console.log(e)
     this.page=e
     this.getlist()
    },
    //点击搜索
    seach(){
     this.page=1
     this.alltotal=0
     this.getlist()
    },
    getlist(){
      let data={
        name:this.name,
        page:this.page,
        per:10
      }
GetAgencyManagement(data).then(res=>{
  if(res.code==200){
    // console.log(res)
    this.alltotal=res.data.total
    this.page=res.data.current_page
    this.alllist=res.data.data
   
    this.alllist.forEach(element => {
      element.created_at=SETDATE(element.created_at,true)
     
    });
  }
})
    },
    setrecord(){
      // console.log("xx")
    this.record=!this.record
    },
    recordsee(){
    this.setrecord()
    },
    setaddstatus() {
      if(this.addstatus){
        this.addparam.name=''
        this.addparam.province=''
        this.addparam.file_path=''
        this.addparam.class_id='1'
        this.addparam.contact=''
        this.addparam.mobile=''
        this.addparam.number=''
        this.addparam.bank=''
        this.addparam.bank_num=''
        this.addparam.remark=''
        this.addparam.status='1'
        this.selectGGZ=[]
      }
      this.addstatus = !this.addstatus;
      this.$emit('closeAddAgent')
    },
    setchoicegg() {
      if(!this.choice){
 this.getGGZlist()
      }
    
      this.choice = !this.choice;
    },
    handleSizeChange() {},
    handleCurrentChange() {},
    selectcity(e) {
      // console.log(e);
      this.addparam.province=e.province.value
      this.addparam.city=e.city.value
    },
     tableRowClassName({row, rowIndex}) {
        if (row.check) {
          return 'warning-row';
        } else{
   return '';
        }
        
      }
  }
};
</script>
<style lang="scss" scoped>
.content /deep/ .el-table .warning-row {
    background: rgb(245, 170, 73);
    width: 100%;
    height: 100%;
  }

  
.header {
  height: 40px;
  width: 97%;
  display: flex;
  
  margin: 0 auto;
  align-items: center;
  flex-direction: row-reverse;
}

.Search {
  display: flex;
  align-items: center;
  margin-left: 30px;
}
.topheader {
  width: 97%;
  margin: 0 auto;
  height: 60px;
  display: flex;
  align-items: center;
  .topname {
    width: 100px;
    font-size: 14px;
  }
}
.d-list {
  width: 95%;
  margin: 0 auto;
  margin-top: 10px;
}
.block {
  float: right;
  display: flex;
  align-items: center;
  margin-top: 10px;
}
.prop {
  width: calc(100% - 210px);
  height: 100%;
  position: fixed;
  top: 0;
  // background: red;
  background: rgba($color: #000000, $alpha: 0.5);
  z-index: 998;
}
.propheader {
  height: 46px;
  width: 100%;
  background: rgba(242, 242, 242, 1);
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  line-height: 46px;
  text-align: center;
  position: relative;
}
.close1 {
  position: absolute;
  right: 10px;
  top: -15px;
  color: #169bd5;
}
.warpprop {
  width: 600px;
  height: 450px;
  // background: blue;
  background: #fff;
  margin: 0 auto;
  border-radius: 10px;
  .seachlist {
    width: 95%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    .seachlistitem {
      width: 33%;
      margin-top: 10px;
      display: flex;
      align-items: center;
      .nameone {
        width: 90px;
        font-size: 14px;
      }
    }
  }
}
.sectggg {
  height: 60px;
  width: 95%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  .nameone {
    width: 90px;
    font-size: 14px;
  }
}
.p-list {
  width: 90%;
  margin: 0 auto;
  max-height: 150px;
  overflow: auto;
  // background: red;
}
.closesee {
  width: 50px;
  margin: 0 auto;
  
}
.propp {
  z-index: 999;
}
.gg-seach {
  width: 95%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  margin-top: 10px;
  .gg-name {
    width: 100px;
    font-size: 14px;
  }
}
.gg-list {
  width: 90%;
  margin: 0 auto;
  height: 270px;
  margin-top: 20px;
}

</style>